<script setup>
import { onMounted, ref,  onBeforeUnmount} from 'vue'
import eventsPub from "../utils/iframe-message.js"
import { sendPostMessage } from "../utils/common.js"

defineProps({
    msg: String,
})

function sayTo() {
    const iframeWindow = document.getElementById("common-iframe").contentWindow
    sendPostMessage(iframeWindow, "VUE_TO_CESIUM", { message: 'vue  回应cesium说：我很好呀！' })
}
onMounted(() => {
    // GET VUE MESSAGE
    eventsPub.on("CESIUM_TO_VUE", function(data) {
        console.log(data)
    })
})
onBeforeUnmount(() => {
    eventsPub.remove("CESIUM_TO_VUE", sayTo)
});

const count = ref(0)
</script>

<template>

    <div class="body-wapper">

        <!-- <div class="header_w"></div> -->
        <div class="header_w_new">
            马营河数字孪生
        </div>

        <div class="iframe_box">
            <iframe id="common-iframe" src="http://192.168.10.33:9999/" frameborder="0"></iframe>
        </div>

        <!-- <div class="footer_w">
            <el-button type="primary" >漫游</el-button>
            <el-button type="primary" >下雨</el-button>
            <el-button type="primary" >下雪</el-button>
            <el-button type="primary" >定位</el-button>
        </div> -->

    </div>

</template>

<style scoped>

.body-wapper{
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.header_w_new{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background-size: 100% 100%;
    background-image: url('../assets/top.png');
    font-size: 28px;
    color: white;
}
.header_w{
    height: 5%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
}
.footer_w {
    position: absolute;
    bottom: 50px;
    left: 0;
    width: 100%;
}
.iframe_box {
    width: 100%;
    height: 95%;
    height: 100%;
}

#common-iframe{
    width: 100%;
    height: 100%;
    border: 0;
    margin: 0;
}

</style>
